<template>
  <div>
    <h1 style="text-align: center; font-size: 24px">待审批接报列表</h1>

    <el-scrollbar height="35vw">
      <div
        v-for="(report, index) in reportInfo"
        :key="index"
        class="scrollbar-demo-item"
      >
        <p style="padding-top: 0.8vw">
          <span>接报ID：{{ report.reportID }}</span
          >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          接报状态：<span :style="fontColorStyle(report)"
            >●{{ report.reportState }}</span
          >
        </p>
        <p>
          <span>接报名称：{{ report.reportName }}</span
          >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span>接报类型：{{ report.eventType }}</span>
        </p>
        <p>
          <span>报警人：{{ report.reporter }}</span
          >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span>报警人电话：{{ report.reporterPhone }}</span>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span>报警时间：{{ formattedReportTime(report) }}</span>
        </p>
        <p>
          <span>最后更新者：{{ report.lastUpdater }}</span
          >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span>最后更新时间：{{ formattedLastUpdateTime(report) }}</span>
        </p>
        <p>
          <span>事件ID：{{ report.eventID }}</span>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span>风险企业名称：{{ report.enterpriseName }}</span>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span style="color: red; font-weight: bold"
            >流程信息...(点击审批接报查看)</span
          >
        </p>

        <el-button
          type="primary"
          class="button"
          plain
          @click="
            dialogInfo = true;
            display(report);
          "
          >审批接报</el-button
        >
      </div>
    </el-scrollbar>
    <el-dialog
      v-model="dialogInfo"
      title="接报审批"
      width="90vw"
      :style="{ height: '45vw' }"
    >
      <el-descriptions
        class="margin-top"
        :title="'接报ID：' + repoInfo.reportID"
        :column="3"
        size="default"
        border
      >
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <tickets />
              </el-icon>
              事件类型
            </div>
          </template>
          <el-tag size="default">{{ repoInfo.eventType }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon><List /></el-icon>
              接报名称
            </div>
          </template>
          {{ repoInfo.reportName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon><InfoFilled /></el-icon>
              接报状态
            </div>
          </template>

          <div :style="fontColorStyle(repoInfo)" class="state">
            ●{{ repoInfo.reportState }}
          </div>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <User />
              </el-icon>
              报警人
            </div>
          </template>
          {{ repoInfo.reporter }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <iphone />
              </el-icon>
              报警人电话
            </div>
          </template>
          {{ repoInfo.reporterPhone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <location />
              </el-icon>
              报警时间
            </div>
          </template>
          {{ repoInfo.reportTime }}
        </el-descriptions-item>
      </el-descriptions>

      <div
        class="cell-item"
        style="
          font-size: 20px;
          font-weight: bold;
          margin-top: 2vw;
          margin-bottom: 2vw;
        "
      >
        流程信息
      </div>

      <el-steps
        style="max-width: 600px"
        :active="active"
        finish-s
        tatus="success"
        align-center
        space="200px"
      >
        <el-step
          v-for="(content, step) in procedureInfo"
          :key="step"
          :title="'step' + (step + 1)"
          :description="content.procedureName + ':' + content.content"
        />
      </el-steps>
      <el-button
        style="margin-top: 12px; margin-left: 32vw"
        @click="next"
        type="primary"
        >下一步</el-button
      >

      <el-descriptions
        class="margin-top"
        title="附加信息"
        :column="3"
        size="default"
      >
        <el-descriptions-item label="事件ID">{{repoInfo.eventID}}</el-descriptions-item>
        <el-descriptions-item label="事件名">{{repoInfo.eventName}}</el-descriptions-item>
        <el-descriptions-item label="工作人员备注">{{repoInfo.remark}}</el-descriptions-item>
        <el-descriptions-item label="事件等级">
          <el-tag size="default">{{repoInfo.eventLevel}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="最后更新者"> {{repoInfo.lastUpdater}} </el-descriptions-item>
        <el-descriptions-item label="最后更新时间">
          {{ repoInfo.lastUpdateTime }}
        </el-descriptions-item>
        <el-descriptions-item label="风险企业名称"> {{repoInfo.enterpriseName}} </el-descriptions-item>
        <el-descriptions-item label="企业合法人"> {{repoInfo.legalPerson}} </el-descriptions-item>
        <el-descriptions-item label="企业合法人电话">
          {{repoInfo.legalpersonphone}}
        </el-descriptions-item>
      </el-descriptions>

      <div style="margin-left: 68vw; margin-top: 1vw">
        <el-button type="success" v-if="isShow" @click="successInfo(repoInfo)"
          >审批通过</el-button
        >
        <el-button type="danger" plain @click="open(repoInfo)"
          >无法解决？交给专家处理</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>





<script setup>
import { ref, inject, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { format, parseISO } from "date-fns";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  Iphone,
  Location,
  OfficeBuilding,
  Tickets,
  User,
  List,
  InfoFilled,
  DArrowRight,
} from "@element-plus/icons-vue";




const router = useRouter();
const route = useRoute();
const axios = inject("axios");
const reportInfo = ref({});
let dialogInfo = ref(false);
const procedureInfo = ref([]);
const active = ref(0);
const procedureNum = ref("");
let isShow = ref(false);
const dates = ref(new Date());
const date = parseISO(dates.value.toISOString());
const info = ref("");
const info1 = ref("");
const user = ref({});
user.value = JSON.parse(sessionStorage.getItem("user"))._value;
const repoInfo = ref({});

const open = (reportInfo) => {
  ElMessageBox.alert("确定提交给专家处理吗？", {
    // if you want to disable its autofocus
    // autofocus: false,
    confirmButtonText: "确定",
    callback: (action) => {
      if (action == "confirm") {
        axios
          .post("/Director/renewreportState", {
            reportID: reportInfo.reportID,
            reportState: "专家人员审批中",
          })
          .then((response) => {
            info1.value = response.data;
            console.log(info1.value);
          })
          .catch((error) => {
            console.log(error);
          });
        ElMessage({
          message: "接报提交成功！",
          type: "success",
          plain: true,
        });
        dialogInfo = false;
        setTimeout(doSomethingAfterOneSecond, 1000);
      }
    },
  });
};

const doSomethingAfterOneSecond = () => {
  location.reload()
};
const successInfo = (reportInfo) => {
     axios
    .post("/Director/setUpdaterInfo", {
      lastUpdater: user.value.userName,
      lastUpdateTime: date,
      reportState: "审核通过",
      reportID: reportInfo.reportID,
    })
    .then((response) => {
      info.value = response.data;
      console.log(info.value);
      if(info.value == '1'){
        dialogInfo = false;
        ElMessage({
        message: "接报审批成功！",
        type: "success",
        plain: true,
        duration: 2000,
      });
      setTimeout(doSomethingAfterOneSecond, 2000);
      }
      
    })
    .catch((error) => {
      console.log(error);
    });
  
};

const next = () => {
  if (active.value++ >= procedureNum.value - 1) {
    console.log(procedureNum.value);
    active.value = procedureNum.value;
    isShow = true;
  }
};

const formattedReportTime = computed((repoInfo) => {
  return (repoInfo) => {
    const date =
      repoInfo.reportTime instanceof Date
        ? repoInfo.reportTime
        : parseISO(repoInfo.reportTime);
    return format(date, "yyyy-MM-dd HH:mm:ss");
  };
});

const formattedLastUpdateTime = computed(() => {
  return (report) => {
    const date =
      report.lastUpdateTime instanceof Date
        ? report.lastUpdateTime
        : parseISO(report.lastUpdateTime);
    return format(date, "yyyy-MM-dd HH:mm:ss");
  };
});
const fontColors = ref({
  待审批: "blue",
  已驳回: "red",
  专家人员审批中: "rgb(5, 106, 30)",
  指挥人员审批中: "rgb(2, 164, 164)",
  审核通过: "green",
});

//computed用于声明响应式依赖的计算属性
const fontColorStyle = computed(() => {
  return (repoInfo) => ({
    color: fontColors.value[repoInfo.reportState] || "black",
  });
});

const display = (report) => {
  axios
    .post("Director/getReportById", {
      reportID: report.reportID,
    })
    .then((response) => {
      repoInfo.value = response.data;
      console.log(repoInfo.value);
    })
    .catch((error) => {
      console.log(error);
    });

  axios
    .post("Director/getProcedure", {
      eventType: report.eventType,
    })
    .then((response) => {
      procedureInfo.value = response.data;
      console.log(procedureInfo.value);
    })
    .catch((error) => {
      console.log(error);
    });

  axios
    .post("Director/getProcedureNum", {
      eventType: report.eventType,
    })
    .then((response) => {
      procedureNum.value = response.data;
      console.log(procedureNum.value);
    })
    .catch((error) => {
      console.log(error);
    });

  axios
    .post("/Director/renewreportState", {
      reportState: "指挥人员审批中",
      reportID: report.reportID,
    })
    .then((response) => {
      info1.value = response.data;
      console.log(info1.value);
    })
    .catch((error) => {
      console.log(error);
    });
};

const init = async () => {
  await axios
    .post("Director/listAllReport", {})
    .then((response) => {
      reportInfo.value = response.data;
      console.log(reportInfo.value);
    })
    .catch((error) => {
      console.log(error);
    });
};
init();
</script>

<style scoped>
.scrollbar-demo-item {
  height: 12vw;
  margin: 10px;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: rgb(59, 63, 60);
  margin-left: 1vw;
  width: 80vw;
  position: relative;
}
p {
  margin-left: 2vw;
  margin-top: 0.8vw;
}
.button {
  position: absolute;
  margin-top: -7vw;
  margin-left: 70vw;
}
</style>